<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        // 设计 : 设计原则 ： solid 四人帮
        // 设计模式 遵循设计原则 设计出的经验，套路

        // 函数、类、逐渐 提高代码的复用

        // 工厂模式 单例模式 观察者模式 
        // 观察者模式 : 两个对象间,一个对象改变会通知另一个对象,可以一对多
    
        let btn = document.querySelector('button')
        let name = '∵·∴'
        btn.name = 'btn'
        btn['name'] = 'ntb'
        btn[name] = 'wtf'
        let obj = {
            name:':·.',
            fn(){
                console.log(name);// ∵·∴
                console.log(this.name);// ntb //覆盖了
                console.log(this['name']);// ntb
                console.log(this[name]);// wtf //这里的name是全局那个变量
                console.log(obj.name);// :·.
            }
        }
        btn.addEventListener('click',obj.fn)
    </script>
</body>
</html>